<template>
	<view class="community-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-content">
				<view class="back-btn" @click="goBack">
					<uni-icons type="left" size="20" color="#fff"></uni-icons>
				</view>
				<text class="header-title">病友圈</text>
				<view class="header-actions">
					<view class="search-btn" @click="showSearch">
						<uni-icons type="search" size="20" color="#666"></uni-icons>
					</view>
					<view class="publish-btn" @click="publishPost">
						<uni-icons type="plus" size="20" color="#fff"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- 分类标签 -->
		<view class="category-tabs">
			<scroll-view scroll-x="true" class="tabs-scroll">
				<view class="tabs-container">
					<view class="tab-item" :class="{ active: activeCategory === item.key }" v-for="item in categories"
						:key="item.key" @click="switchCategory(item.key)">
						<text>{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 帖子列表 -->
		<scroll-view scroll-y="true" class="posts-scroll" @scroll="handleScroll" @scrolltolower="loadMore" :refresher-enabled="canRefresh" refresher-threshold="70"
			@refresherrefresh="onRefresh" :refresher-triggered="refreshing">
			<view class="posts-list">
				<view class="post-card" v-for="post in filteredPosts" :key="post.id" @click="viewPostDetail(post)">
					<!-- 用户信息 -->
					<view class="post-header">
						<view class="user-info">
							<image class="user-avatar" :src="post.userAvatar" mode="aspectFill"></image>
							<view class="user-details">
								<text class="username">{{ post.username }}</text>
								<text class="post-time">{{ post.createTime }}</text>
							</view>
						</view>
						<view class="post-category">
							<text class="category-tag">{{ post.categoryName }}</text>
						</view>
						<view class="post-stats">
							<text class="stat-item">👀 {{ post.viewCount || 0 }}</text>
							<text class="divider">·</text>
							<text class="stat-item" aria-label="赏币">🪙 {{ post.rewardCoin || 0 }}</text>
						</view>
					</view>

					<!-- 帖子内容 -->
					<view class="post-content">
						<text class="post-title" :class="post.isOnShelf ? 'ing' : 'end'">{{ post.title }}</text>
						<text class="post-text" v-if="post.content">{{ post.content }}</text>

						<!-- 图片展示 -->
						<view class="post-images" v-if="post.images && post.images.length > 0">
							<view class="image-item"
								:class="{ 'single': post.images.length === 1, 'multiple': post.images.length > 1 }"
								v-for="(image, index) in post.images.slice(0, 3)" :key="index"
								@click.stop="previewImage(post.images, index)">
								<image :src="image" mode="aspectFill"></image>
								<view class="more-images" v-if="index === 2 && post.images.length > 3">
									<text>+{{ post.images.length - 3 }}</text>
								</view>
							</view>
						</view>
					</view>

					<!-- 状态展示 -->
					<view class="post-status">
						<text :class="['status-tag', post.isOnShelf ? 'ing' : 'end']">{{ post.isOnShelf ? '进行中' : '已结束' }}</text>
					</view>

					<!-- 互动区域 -->
					<view class="post-actions">
						<view class="action-item" @click.stop="toggleLike(post)">
							<uni-icons :type="post.isLiked ? 'heart-filled' : 'heart'" size="18"
								:color="post.isLiked ? '#ff4757' : '#666'"></uni-icons>
							<text :class="{ liked: post.isLiked }">{{ post.likeCount || '点赞' }}</text>
						</view>
						<view class="action-item" @click.stop="commentOnPost(post)">
							<uni-icons type="chat" size="18" color="#666"></uni-icons>
							<text>{{ post.commentCount || '评论' }}</text>
						</view>
						<view class="action-item" @click.stop="toggleCollect(post)">
							<uni-icons :type="post.isCollected ? 'star-filled' : 'star'" size="18"
								:color="post.isCollected ? '#f5a623' : '#666'"></uni-icons>
							<text :class="{ collected: post.isCollected }">{{ post.collectCount || '收藏' }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<view class="load-more" v-if="hasMore">
				<text>加载更多...</text>
			</view>
			<view class="no-more" v-else>
				<text>没有更多内容了</text>
			</view>
		</scroll-view>

		<!-- 悬浮发布按钮 -->
		<view class="floating-publish" @click="publishPost">
			<uni-icons type="plus" size="24" color="#fff"></uni-icons>
		</view>

		<!-- 搜索面板 -->
		<view v-if="searchVisible" class="search-overlay" :key="searchKey + '-overlay'" @click.self="searchVisible = false">
			<view class="search-panel">
				<view class="panel-header">
					<text>筛选</text>
					<uni-icons type="close" size="22" color="#666" @click="searchVisible = false"></uni-icons>
				</view>
				<view class="panel-body">
					<view class="field">
						<text class="label">关键词</text>
						<input class="input" type="text" :key="searchKey" v-model.trim="keyword" placeholder="请输入关键词（标题/内容/作者）" />
					</view>
					<view class="field switch">
						<text class="label">仅显示进行中</text>
						<switch :key="searchKey + '-sw'" :checked="onlyOnline" @change="onlyOnline = $event.detail.value" color="#667eea" />
					</view>
				</view>
				<view class="panel-actions">
					<button class="btn primary" @click="doSearch">搜索</button>
					<button class="btn clear" @click="clearSearch">清空</button>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import { getDepartmentList } from '@/api/department'
	import { getCircleList, getCircleListByDepartment, getPatientCircleInfo } from '@/api/circle'
	import { addComment } from '@/api/circleComment'
	import storage from '@/utils/storage'
	import constant from '@/utils/constant'
	export default {
		data() {
			return {
				// 'all' or departmentId (number/string)
				activeCategory: 'all',
				refreshing: false,
				hasMore: true,
				pageNum: 1,
				pageSize: 10,
				scrollTop: 0,
				canRefresh: true,
				// 搜索相关
				searchVisible: false,
				keyword: '',
				onlyOnline: false, // true => 仅上架(status=0)
				// 用于强制重渲染搜索控件，避免保留上一次输入
				searchKey: 0,
				categories: [
					{ key: 'all', name: '全部' }
				],
				// 后端返回的圈子（映射后的）
				posts: []
			}
		},
		computed: {
			filteredPosts() {
				// 列表数据已按接口过滤，这里直接返回
				return this.posts
			}
		},
		onLoad(options) {
			this.fetchCategories()
			const pid = options && (options.patientId || options.pid)
			if (pid !== undefined && pid !== null && String(pid) !== '') {
				this.fetchPatientCircles(pid)
			} else {
				this.fetchAllCircles(true, true)
			}
		},
		methods: {
            // 跳转帖子详情
            viewPostDetail(post) {
                if (!post || post.id === undefined || post.id === null) {
                    this.$modal && this.$modal.msg && this.$modal.msg('无法获取帖子ID')
                    return
                }
                const pid = post.patientId ?? post.userId ?? post.ownerId
                const ava = post.userAvatar
                let url = `/pages/community/detail?id=${encodeURIComponent(post.id)}`
                if (pid !== undefined && pid !== null && String(pid) !== '') {
                    url += `&patientId=${encodeURIComponent(pid)}`
                }
                if (ava) {
                    const enc = encodeURIComponent(ava)
                    url += `&avatar=${enc}&avatarUrl=${enc}`
                }
                uni.navigateTo({ url })
            },
			switchCategory(categoryKey) {
				this.activeCategory = categoryKey
				if (categoryKey === 'all') {
					// 切回全部：清空筛选并刷新
					this.keyword = ''
					this.onlyOnline = false
					this.searchKey++
					this.pageNum = 1
					this.posts = []
					this.fetchAllCircles(true)
				} else {
					this.fetchCirclesByDept(categoryKey, true)
				}
			},
			// 按患者过滤圈子列表
			async fetchPatientCircles(patientId) {
				try {
					const res = await getPatientCircleInfo(patientId)
					const rows = Array.isArray(res?.data)
						? res.data
						: (Array.isArray(res?.rows) ? res.rows : (Array.isArray(res) ? res : []))
					const mapped = rows.map(this.mapCircleToPost)
					this.posts = mapped
					this.hasMore = false
					this.activeCategory = 'all'
				} catch (e) {
					this.$modal && this.$modal.msg && this.$modal.msg('获取该患者的病友圈失败')
					console.error('获取患者圈子失败', e)
				}
			},
			async fetchCategories() {
				try {
					const res = await getDepartmentList()
					const list = Array.isArray(res?.data)
						? res.data
						: (Array.isArray(res?.rows) ? res.rows : (Array.isArray(res?.records)
							? res.records
							: (Array.isArray(res?.data?.rows)
								? res.data.rows
								: (Array.isArray(res?.data?.records)
									? res.data.records
									: (Array.isArray(res) ? res : [])))))
					const mapped = list
						.map(d => {
							const name = d?.name || d?.deptName || d?.label || d?.title
							const id = d?.id ?? d?.deptId ?? d?.departmentId
							return name && (id !== undefined)
								? { key: id, name }
								: null
						})
						.filter(Boolean)
					this.categories = [{ key: 'all', name: '全部' }, ...mapped]
				} catch (e) {
					this.$modal && this.$modal.msg ? this.$modal.msg('获取科室失败') : console.error('获取科室失败', e)
				}
			},
			async fetchAllCircles(reset = false, silent = false) {
				try {
					const params = { pageNum: this.pageNum, pageSize: this.pageSize }
					if (this.keyword && String(this.keyword).trim()) params.keyword = this.keyword.trim()
					if (this.onlyOnline) params.status = 0
					const res = await getCircleList({}, params)
					const rows = Array.isArray(res?.rows)
						? res.rows
						: (Array.isArray(res?.data)
							? res.data
							: (Array.isArray(res?.records)
								? res.records
								: (Array.isArray(res?.data?.rows)
									? res.data.rows
									: (Array.isArray(res?.data?.records)
										? res.data.records
										: (Array.isArray(res) ? res : [])))))
					const mapped = rows.map(this.mapCircleToPost)
					if (reset) {
						this.posts = mapped
					} else {
						this.posts = [...this.posts, ...mapped]
					}
					const total = (
						res?.total ?? res?.Total ?? res?.pages ??
						res?.data?.total ?? res?.data?.Total ?? res?.data?.pages ??
						(Array.isArray(res?.records) ? res.records.length : undefined) ??
						(Array.isArray(res?.data?.records) ? res.data.records.length : undefined)
					)
					// 若 total 缺失，则以“本页数量==pageSize”作为是否还有下一页的依据
					this.hasMore = (typeof total === 'number')
						? (this.pageNum * this.pageSize < total)
						: (mapped.length === this.pageSize)
					if (!silent && mapped.length === 0 && this.pageNum === 1) {
						this.$modal && this.$modal.msg && this.$modal.msg('暂无内容')
					}
				} catch (e) {
					if (!silent) this.$modal && this.$modal.msg && this.$modal.msg('获取病友圈失败')
					console.error('获取病友圈失败', e)
				}
			},
			async fetchCirclesByDept(deptId, reset = false) {
				try {
					// 统一走 /circle/list，确保返回 CirclePostListVo 完整结构
					const params = { departmentId: deptId, pageNum: 1, pageSize: this.pageSize }
					if (this.keyword && String(this.keyword).trim()) params.keyword = this.keyword.trim()
					if (this.onlyOnline) params.status = 0
					const res = await getCircleList({}, params)
					const rows = Array.isArray(res?.rows)
						? res.rows
						: (Array.isArray(res?.data)
							? res.data
							: (Array.isArray(res?.records)
								? res.records
								: (Array.isArray(res?.data?.rows)
									? res.data.rows
									: (Array.isArray(res?.data?.records)
										? res.data.records
										: (Array.isArray(res) ? res : [])))))
					const mapped = rows.map(this.mapCircleToPost)
					this.posts = mapped
					const total = (
						res?.total ?? res?.Total ?? res?.pages ??
						res?.data?.total ?? res?.data?.Total ?? res?.data?.pages ??
						(Array.isArray(res?.records) ? res.records.length : undefined) ??
						(Array.isArray(res?.data?.records) ? res.data.records.length : undefined)
					)
					this.hasMore = (typeof total === 'number')
						? (1 * this.pageSize < total)
						: (mapped.length === this.pageSize)
				} catch (e) {
					this.$modal && this.$modal.msg && this.$modal.msg('获取科室病友圈失败')
					console.error('获取科室病友圈失败', e)
				}
			},
			mapCircleToPost(circle) {
				// 兼容多种后端字段命名与嵌套对象
				const userObj = circle?.user || circle?.creator || circle?.author || null
				const isAnonymous = circle?.anonymous === true || circle?.isAnonymous === true || circle?.isAnonymous === 1
				const defaultAvatar = 'https://img.cdn.aliyun.dcloud.net.cn/uni-app/uniCloud/uni-id/avatar.png'

				// 用户名兼容字段
				let username = (
					userObj?.nickName || userObj?.nickname || userObj?.userName || userObj?.name ||
					circle?.userNickname || circle?.nickName || circle?.nickname || circle?.userName ||
					circle?.authorName || circle?.patientName || circle?.createByName || circle?.createBy
				)
				// 头像兼容字段
				let userAvatar = (
					userObj?.avatar || userObj?.avatarUrl || userObj?.headImg || userObj?.headPortrait ||
					circle?.userAvatar || circle?.avatar || circle?.avatarUrl || circle?.headImg || circle?.headPortrait
				) || defaultAvatar

				// 如果圈子作者是当前登录患者，则用本地缓存中的头像与昵称覆盖
				try {
					const localId = storage.get(constant.id)
					// 兼容不同字段承载的“作者/患者”ID
					const circleOwnerId = (
						circle?.patientId ?? circle?.userId ?? circle?.creatorId ?? circle?.createById ??
						userObj?.id ?? userObj?.userId
					)
					if (localId && circleOwnerId && String(localId) === String(circleOwnerId)) {
						const localAvatar = storage.get(constant.avatar)
						const localName = storage.get(constant.name)
						if (localAvatar) userAvatar = localAvatar
						if (localName) username = localName
					}
				} catch (err) {}

				if (isAnonymous) {
					username = '匿名'
					userAvatar = defaultAvatar
				}

				// 统一图片字段：兼容数组/字符串(JSON/逗号/空格分隔)/单链接
				let images = []
				const rawImg = (
					circle?.images ?? circle?.pics ?? circle?.imageUrls ?? circle?.imagesUrls ??
					circle?.image ?? circle?.imagesUrl ?? circle?.picsUrl ?? null
				)
				if (Array.isArray(rawImg)) {
					images = rawImg
				} else if (typeof rawImg === 'string') {
					const s = rawImg.trim()
					try {
						if (s.startsWith('[') && s.endsWith(']')) {
							const arr = JSON.parse(s)
							if (Array.isArray(arr)) images = arr
						} else {
							images = s.split(/[\s,]+/).map(v => v.trim()).filter(Boolean)
						}
					} catch (e) {
						images = s.split(/[\s,]+/).map(v => v.trim()).filter(Boolean)
					}
				}
				// 若仍为空，兜底使用单链接字段
				if ((!images || images.length === 0)) {
					const single = circle?.firstUrl || circle?.coverUrl || circle?.thumbnail || circle?.thumbUrl || circle?.cover
					if (single && typeof single === 'string') images = [single]
				}
				// 规范化与去重（去掉查询/哈希、统一小写、去尾斜杠）
				(() => {
					const norm = (url) => {
						try {
							const u = new URL(url, typeof window !== 'undefined' ? window.location.origin : 'http://localhost')
							let p = u.origin + u.pathname
							if (p.endsWith('/')) p = p.slice(0, -1)
							return p.toLowerCase()
						} catch (_) {
							// 相对路径或非法URL，做简易处理
							let s = url.split(/[?#]/)[0]
							if (s.endsWith('/')) s = s.slice(0, -1)
							return s.toLowerCase()
						}
					}
					const seen = new Set()
					const res = []
					for (const raw of (images || [])) {
						const u = typeof raw === 'string' ? raw.trim() : ''
						if (!u || !/^(https?:)?\//.test(u)) continue
						const key = norm(u)
						if (!seen.has(key)) { seen.add(key); res.push(u) }
					}
					images = res
				})()

				return {
					id: circle?.id ?? circle?.circleId ?? circle?.postId ?? Math.random().toString(36).slice(2),
					title: circle?.title || circle?.name || '未命名',
					content: circle?.content || circle?.remark || '',
					categoryName: circle?.departmentName || circle?.deptName || '',
					createTime: circle?.createTime || circle?.publishTime || circle?.gmtCreate || '',
					username: username || '匿名',
					userAvatar: userAvatar,
					// 补充 patientId，便于详情页直接携带
					patientId: (
						circle?.patientId ?? circle?.userId ?? circle?.creatorId ?? circle?.createById ??
						userObj?.id ?? userObj?.userId
					),
					likeCount: circle?.likeCount || circle?.likes || 0,
					commentCount: circle?.commentCount || circle?.comments || circle?.commentNum || 0,
					collectCount: circle?.collectCount || circle?.favorites || circle?.stars || 0,
					viewCount: circle?.viewCount || circle?.views || circle?.readCount || circle?.readNum || circle?.browseCount || circle?.browseNum || circle?.pv || circle?.view_num || 0,
					rewardCoin: circle?.rewardCoin || circle?.reward || circle?.coin || circle?.bounty || circle?.rewardAmount || circle?.rewardNum || circle?.reward_coin || 0,
					// 0 正常上架，1 下架；若为数字优先按 0/1 处理，否则兼容其它字段
					isOnShelf: (() => {
						const raw = circle?.status ?? circle?.isOnShelf ?? circle?.onShelf ?? circle?.shelfStatus ?? circle?.shelf
						if (typeof raw === 'number') return raw === 0
						if (typeof raw === 'string') {
							const v = raw.toUpperCase()
							if (v === '0' || v === 'ON' || v === 'UP' || v === 'ONLINE' || v === 'SHELVES_ON') return true
							if (v === '1' || v === 'OFF' || v === 'DOWN' || v === 'OFFLINE' || v === 'SHELVES_OFF') return false
						}
						if (typeof raw === 'boolean') return raw
						return true
					})(),
					isLiked: false,
					isCollected: false,
					images
				}
			},
			handleScroll(e) {
				// 仅当滚动到顶部时才允许下拉刷新，避免鼠标拖拽误触发
				this.scrollTop = e.detail.scrollTop || 0
				this.canRefresh = this.scrollTop <= 2
			},
			onRefresh() {
				this.refreshing = true
				// 根据当前标签刷新
				if (this.activeCategory === 'all') {
					this.pageNum = 1
					this.fetchAllCircles(true).finally(() => { this.refreshing = false })
				} else {
					this.fetchCirclesByDept(this.activeCategory, true).finally(() => { this.refreshing = false })
				}
			},
			loadMore() {
				if (!this.hasMore) return
				if (this.activeCategory === 'all') {
					this.pageNum += 1
					this.fetchAllCircles(false)
				} else {
					this.$modal && this.$modal.msg && this.$modal.msg('该分类暂不支持加载更多')
				}
			},
			goBack() {
				// 检查是否有上一页可以返回
				const pages = getCurrentPages()
				if (pages.length > 1) {
					// 有上一页，执行返回
					uni.navigateBack()
				} else {
					// 没有上一页，跳转到首页
					uni.switchTab({
						url: '/pages/index'
					})
				}
			},

			toggleLike(post) {
				post.isLiked = !post.isLiked
				if (post.isLiked) {
					post.likeCount = (post.likeCount || 0) + 1
				} else {
					post.likeCount = Math.max((post.likeCount || 1) - 1, 0)
				}
			},
			// 切换收藏
			toggleCollect(post) {
				post.isCollected = !post.isCollected
				if (post.isCollected) {
					post.collectCount = (post.collectCount || 0) + 1
				} else {
					post.collectCount = Math.max((post.collectCount || 1) - 1, 0)
				}
			},
			// 评论弹窗：支持可编辑输入；若运行环境不支持 editable，则跳转详情页评论
			commentOnPost(post) {
				try {
					uni.showModal({
						title: '发表评论',
						editable: true,
						placeholderText: '写下你的评论…',
						confirmText: '发送',
						success: (res) => {
							if (res.confirm) {
								const text = (res.content || '').trim()
								if (text) {
									// 调后端新增评论
									addComment({ circleId: post.id, content: text }).then(() => {
										post.commentCount = (post.commentCount || 0) + 1
										this.$modal && this.$modal.msg && this.$modal.msg('评论成功')
									}).catch(err => {
										console.error('评论失败', err)
										this.$modal && this.$modal.msg && this.$modal.msg('评论失败')
									})
								} else {
									this.$modal && this.$modal.msg && this.$modal.msg('请输入评论内容')
								}
							}
						}
					})
				} catch (e) {
					// 兼容不支持 editable 的平台：跳转到详情页进行评论
					this.viewPostDetail(post)
				}
			},
			showComments(post) {
				this.$modal.msg(`查看收藏：${post.title}`)
			},
			sharePost(post) {
				this.$modal.msg(`分享帖子：${post.title}`)
			},
			previewImage(images, current) {
				uni.previewImage({
					urls: images,
					current: current
				})
			},
			showSearch() {
				// 打开面板时重置输入，避免沿用上一次的关键词与开关
				this.keyword = ''
				this.onlyOnline = false
				this.searchKey++
				this.searchVisible = true
			},
			async doSearch() {
				// 执行筛选搜索
				this.pageNum = 1
				this.searchVisible = false
				if (this.activeCategory === 'all') {
					await this.fetchAllCircles(true)
				} else {
					await this.fetchCirclesByDept(this.activeCategory, true)
				}
				// 搜索完成后，清空筛选，便于下次输入
				this.keyword = ''
				this.onlyOnline = false
				this.searchKey++
			},
			clearSearch() {
				this.keyword = ''
				this.onlyOnline = false
				this.searchKey++
				this.pageNum = 1
				if (this.activeCategory === 'all') {
					this.fetchAllCircles(true)
				} else {
					this.fetchCirclesByDept(this.activeCategory, true)
				}
			},
			// 发布病友圈：跳转到发布页
			publishPost() {
				uni.navigateTo({ url: '/pages/community/publish' })
			}

		}
	}
</script>

<style lang="scss" scoped>
	.community-container {
		background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
		height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.header {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding-top: var(--status-bar-height);
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);

		.header-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 30rpx;

			.back-btn {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: rgba(255, 255, 255, 0.2);
				border-radius: 30rpx;
				transition: all 0.3s ease;

				&:active {
					background-color: rgba(255, 255, 255, 0.3);
					transform: scale(0.95);
				}
			}

			.header-title {
				font-size: 36rpx;
				font-weight: 600;
				color: #fff;
				flex: 1;
				text-align: center;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
			}

			.header-actions {
				display: flex;
				align-items: center;
				gap: 20rpx;

				.search-btn, .publish-btn {
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: rgba(255, 255, 255, 0.2);
					border-radius: 30rpx;
					transition: all 0.3s ease;

					&:active {
						background-color: rgba(255, 255, 255, 0.3);
						transform: scale(0.95);
					}
				}
			}
		}
	}

	.category-tabs {
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

		.tabs-scroll {
			white-space: nowrap;

			.tabs-container {
				display: flex;
				padding: 20rpx 0;

				.tab-item {
					flex-shrink: 0;
					padding: 15rpx 30rpx;
					margin: 0 10rpx;
					border-radius: 30rpx;
					background-color: #f8f8f8;
					transition: all 0.3s ease;
					box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);

					&.active {
						background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
						color: #fff;
						box-shadow: 0 4rpx 8rpx rgba(102, 126, 234, 0.3);
						transform: translateY(-2rpx);
					}

					&:not(.active):active {
						background-color: #e0e0e0;
						transform: scale(0.98);
					}

					text {
						font-size: 28rpx;
						font-weight: 500;
					}
				}
			}
		}
	}

	.posts-scroll {
		flex: 1;
		/* 防止 H5 在非顶部拖拽触发浏览器/页面级下拉刷新 */
		overflow-anchor: none;
		overflow-y: auto;
		overscroll-behavior-y: contain;
		-webkit-overflow-scrolling: touch;
		touch-action: pan-y;
	}

	.posts-list {
		padding: 20rpx;
	}

	.post-card {
		background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		border: 1rpx solid #f0f0f0;

		&:active {
			transform: scale(0.99);
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		}

		.post-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			padding: 30rpx 30rpx 20rpx;

			.user-info {
				display: flex;
				align-items: center;

				.user-avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 40rpx;
					margin-right: 20rpx;
					border: 2rpx solid #e0e0e0;
					box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
				}

				.user-details {
					.username {
						display: block;
						font-size: 28rpx;
						font-weight: 600;
						color: #333;
						margin-bottom: 8rpx;
					}

					.post-time {
						font-size: 22rpx;
						color: #999;
					}
				}
			}

			.post-category {
				.category-tag {
					padding: 8rpx 16rpx;
					background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
					color: #fff;
					font-size: 20rpx;
					border-radius: 20rpx;
					box-shadow: 0 2rpx 4rpx rgba(102, 126, 234, 0.3);
				}
			}

			.post-stats {
				position: absolute;
				right: 30rpx;
				top: 10rpx;
				display: flex;
				align-items: center;
				gap: 8rpx;
				color: #999;
				font-size: 22rpx;
				.stat-item { color: #888; }
				.divider { padding: 0 4rpx; color: #ccc; }
			}
		}

		.post-content {
			padding: 0 30rpx 20rpx;

			.post-title {
				display: block;
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
				margin-bottom: 15rpx;
				line-height: 1.4;
				&.ing { color: #2e7d32; }
				&.end { color: #b71c1c; }
			}

			.post-text {
				display: block;
				font-size: 26rpx;
				color: #666;
				line-height: 1.6;
				margin-bottom: 20rpx;
			}

			.post-images {
				display: flex;
				flex-wrap: wrap;
				gap: 10rpx;

				.image-item {
					position: relative;
					border-radius: 12rpx;
					overflow: hidden;
					box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
					transition: all 0.3s ease;

					&:active {
						transform: scale(0.98);
					}

					&.single {
						width: 300rpx;
						height: 200rpx;
					}

					&.multiple {
						width: calc(33.33% - 7rpx);
						height: 150rpx;
					}

					image {
						width: 100%;
						height: 100%;
					}

					.more-images {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background-color: rgba(0, 0, 0, 0.5);
						display: flex;
						align-items: center;
						justify-content: center;

						text {
							color: #fff;
							font-size: 24rpx;
							font-weight: 600;
						}
					}
				}
			}
		}

		.post-status {
			padding: 0 30rpx 10rpx;
			.status-tag {
				display: inline-block;
				padding: 6rpx 12rpx;
				border-radius: 16rpx;
				font-size: 22rpx;
				&.ing { background-color: #e8f5e9; color: #2e7d32; }
				&.end { background-color: #fdecea; color: #b71c1c; }
			}
		}

		.post-actions {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			border-top: 1rpx solid #f5f5f5;

			.action-item {
				display: flex;
				align-items: center;
				margin-right: 60rpx;
				transition: all 0.3s ease;
				padding: 10rpx;
				border-radius: 16rpx;

				&:active {
					background-color: #f0f0f0;
					transform: scale(0.95);
				}

				text {
					font-size: 24rpx;
					color: #666;
					margin-left: 8rpx;

					&.liked {
						color: #ff4757;
						font-weight: 500;
					}
				}
			}
		}
	}

	.load-more,
	.no-more {
		text-align: center;
		padding: 40rpx;

		text {
			font-size: 24rpx;
			color: #999;
		}
	}

	.floating-publish {
		position: fixed;
		right: 30rpx;
		bottom: 120rpx;
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 20rpx rgba(102, 126, 234, 0.4);
		z-index: 999;
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.95) rotate(90deg);
			box-shadow: 0 4rpx 10rpx rgba(102, 126, 234, 0.6);
		}
	}

	/* 搜索面板样式 */
	.search-overlay {
		position: fixed;
		left: 0; right: 0; top: 0; bottom: 0;
		background-color: rgba(0,0,0,0.45);
		display: flex;
		align-items: flex-end;
		z-index: 1000;
	}
	.search-panel {
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding: 32rpx 28rpx calc(28rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(28rpx + env(safe-area-inset-bottom));
		box-shadow: 0 -8rpx 24rpx rgba(0,0,0,0.06);
	}
	.search-panel .panel-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
		text { font-size: 32rpx; font-weight: 600; color: #333; }
	}
	.search-panel .panel-body { padding: 20rpx 2rpx; max-height: 50vh; overflow-y: auto; }
	.search-panel .field { margin: 20rpx 0 24rpx; }
	.search-panel .field.switch { display: flex; align-items: center; justify-content: space-between; }
	.search-panel .label { font-size: 28rpx; color: #555; margin-bottom: 12rpx; display: block; }
	.search-panel .input { background: #f6f7fb; border-radius: 14rpx; padding: 0 20rpx; height: 88rpx; line-height: 88rpx; font-size: 28rpx; }
	.search-panel .panel-actions { display: flex; flex-direction: column; gap: 20rpx; margin-top: 8rpx; }
	.search-panel .btn { width: 100%; border-radius: 14rpx; height: 88rpx; line-height: 88rpx; font-size: 30rpx; }
	.search-panel .btn.clear { background: #f2f3f5; color: #666; }
	.search-panel .btn.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; }
</style>